<template>
  <div>
    <Header> </Header>
    <div class="test-center progress-course w1200">
      <!--  -->
      <el-tabs tab-position="left" v-model="checkedTabs" type="card">
        <el-tab-pane label="智能记忆" name="type-1">
          <TableData :type="0" :unitList="unitList"></TableData>
        </el-tab-pane>
        <el-tab-pane label="智能词听" name="type-2">
          <TableData :type="1" :unitList="unitList"></TableData>
        </el-tab-pane>
        <el-tab-pane label="智能听写" name="type-3">
          <TableData :type="2" :unitList="unitList"></TableData>
        </el-tab-pane>
        <el-tab-pane label="智能默写" name="type-4">
          <TableData :type="3" :unitList="unitList"></TableData>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import TableData from "./TableData";
import { getUnitList } from "@/api/index";
export default {
  data() {
    return {
      checkedTabs: "type-1",
      checkedBookData: null,
      unitList: [],
    };
  },
  components: {
    Header,
    TableData,
  },
  methods: {
    goTest() {
      this.$confirm("进入水平测试", "提示", {
        confirmButtonText: "极速模式",
        cancelButtonText: "普通模式",

        showClose: true,
        beforeClose: this.$beforeConfirmClose,
      })
        .then(() => {
          this.$router.push({
            name: "quickTest",
          });
        })
        .catch(() => {
          this.$router.push({
            name: "generalTest",
          });
        });
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
        }
      });
    },
    goTestRecord() {
      this.$router.push({
        name: "testRecord",
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getUnitList();
  },
  mounted() {},
};
</script>